import React,{ Component } from 'react'
import { NavLink } from 'react-router-dom'

import HomeHeader from '../../../../components/HomeComponent/Header'
import Carousel from '../../../../components/HomeComponent/Carousel'
import RecommendLeft from '../../../../static/icon/recommend.png'
import RecommendRight from '../../../../static/icon/recommend2.png'
import ClickRight from '../../../../static/icon/arrow-left.png'
import './style.less'

export default class HomeIndex extends Component{
  constructor(){
    super()
    this.state = {
      tabTitle: [
        '公考求职',
        '财会金融',
        '职业技能',
        '医疗工程'
      ]
    }
  }

  componentDidMount(){
    this.refs.tab_ul.style.width = this.state.tabTitle.length * 325/(1080/375)/50 + 'rem'
  }

  render(){
    return(
      <div className='home-index'>
        {/* home头部 */}
        <HomeHeader />
        {/* home轮播 */}
        <Carousel />
        {/* home每日推荐 */}
        <div className='day-recommend clearfix'>
          <img src={RecommendLeft} className='recommend-left' alt='' />
          <div className='recommend-right-box clearfix'>
            <img src={RecommendRight} alt='' className='recommend-right' />
            <ul>
              <li><h3>热门内容 每日推荐</h3></li>
              <li><span>理财小白7分搞懂理财</span></li>
            </ul>
            <img src={ClickRight} alt='' className='click-right' />
          </div>
        </div>
        {/* home选项卡选项 */}
        <div className='tab-title-box'>
          <ul className='tab-title clearfix' ref='tab_ul'>
            <li><NavLink exact activeClassName="active" to='/home'>公考求职</NavLink></li>
            <li><NavLink activeClassName="active" to='/home/finance'>财会金融</NavLink></li>
            <li><NavLink activeClassName="active" to='/home/occupation'>职业技能</NavLink></li>
            <li><NavLink activeClassName="active" to='/home/medical'>医疗工程</NavLink></li>
          </ul>
        </div>
        {this.props.children}
      </div>
    )
  }
  getList(index){
    console.log(this.state.tabTitle[index])
  }
}
